<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片 -->
      <el-card v-loading="loading" element-loading-text="拼命加载中..." class="tree-card">
        <!-- title -->
        <el-tabs v-model="activeName">
          <el-tab-pane label="组织架构" name="first" />
        </el-tabs>
        <!-- 树形 -->
        <div class="treebox">
          <!-- 第一行 -->
          <TreeTools root :node-data="company" @add="addDept(company)" />
          <el-divider />
          <!-- 树 -->
          <el-tree :data="list" :props="defaultProps" default-expand-all>
            <!-- 这里data是树形中每一条树的数据 -->
            <template v-slot="{ data }">
              <TreeTools
                :node-data="data"
                @updateDepartments="getDepartments"
                @add="addDept(data)"
                @edit="editDept(data)"
              />
            </template>
          </el-tree>
        </div>
      </el-card>
      <!-- 新增部门弹框 -->
      <AddDept
        ref="add"
        :dialog-visible.sync="dialogVisible"
        :dept-data="currentDept"
        @updateDepartments="getDepartments"
      />
    </div>
  </div>
</template>

<script>
import TreeTools from './components/TreeTools'
import AddDept from './components/AddDept'
import { getDepartmentList } from '@/api/departments'
import { listToTree } from '@/utils'
export default {
  name: 'Departments',
  components: {
    TreeTools,
    AddDept
  },
  data() {
    return {
      activeName: 'first',
      list: [],
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      company: {
        name: '江苏传智播客教育科技股份有限公司',
        manager: '负责人',
        // 顶级部门需要提供''id, 不然添加时会影响子部门同级部门的等值判断
        id: ''
      },
      loading: false, // 加载效果
      dialogVisible: false, // 控制增加部门弹框
      currentDept: {} // 当前点击的部门数据
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      this.loading = true
      // 获取部门列表数据并转换成树形数据
      const data = await getDepartmentList()
      // console.log(data)
      this.company.name = data.companyName
      this.list = listToTree(data.depts)
      this.loading = false
    },
    // 添加子部门
    addDept(data) {
      // 点击添加显示弹框
      this.dialogVisible = true
      // 记录点击的部门数据
      this.currentDept = data
    },
    // 编辑部门
    editDept(data) {
      // 记录点击查看的部门数据
      this.currentDept = data
      // 回显
      this.$refs.add.getDepartmentDetail(data.id)
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
.tree-card {
  padding: 20px;
  font-size:14px;
  .treebox {
    padding: 30px 120px 0;
  }
  .info {
    width: 80px;
    padding-left: 20px;
  }
  .el-divider--horizontal {
    margin: -4px 0 12px;
  }
  ::v-deep {
    // 树状菜单的所有图标
    .el-tree-node__expand-icon {
      font-size: 18px;
      color: #000;
      &::before {
        content: "\e723";
      }
      // 展开的图标
      &.expanded {
        transform: rotate(0deg);
        &::before {
          content: "\e722";
        }
      }
      // 叶子图标
      &.is-leaf {
        color: #000;
        &::before {
          content: "\e7ab";
        }
      }
    }
  }
}
</style>

